{extend name="../../../view/public/base" /}

{block name="css"}
<style>
    body {
        background-color: #F2F2F2;
    }
</style>
{/block}

{block name="body"}
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <form class="layui-form" lay-filter="addForm" autocomplete="off">
                    <!--管理员id-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">管理员id</label>
                        <div class="layui-input-block">
                            <input type="number" name="admin_id" placeholder="请输入管理员id" class="layui-input" value="0" lay-verify='required'>
                        </div>
                    </div>
                    <!--分类id-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类id</label>
                        <div class="layui-input-block">
                            <input type="number" name="category_id" placeholder="请输入分类id" class="layui-input" value="0" lay-verify='required'>
                        </div>
                    </div>
                    <!--文章标题-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">文章标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" placeholder="请输入文章标题" class="layui-input" value="" lay-verify='required'>
                        </div>
                    </div>
                    <!--文章简介-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">文章简介</label>
                        <div class="layui-input-block">
                            <input type="text" name="synopsis" placeholder="请输入文章简介" class="layui-input" value="">
                        </div>
                    </div>
                    <!--文章作者-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">文章作者</label>
                        <div class="layui-input-block">
                            <input type="text" name="author" placeholder="请输入文章作者" class="layui-input" value="">
                        </div>
                    </div>
                    <!--文章图片-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">文章图片</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="image" class="layui-input">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn" id="image">上传图片</button>
                                <div class="layui-upload-list" id="imagePreview" style="display: flex;">
                                    <!--加载默认图片-->
                                    <script>
                                        getImagesHtmlForEdit('', 'image')
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--浏览次数-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">浏览次数</label>
                        <div class="layui-input-block">
                            <input type="number" name="visit" placeholder="请输入浏览次数" class="layui-input" value="0">
                        </div>
                    </div>
                    <!--排序-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input type="number" name="sort" placeholder="请输入排序" class="layui-input" value="0" lay-verify='required'>
                        </div>
                    </div>
                    <!--状态:0=隐藏,1=正常-->
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block" id="status">
                                <select name="status" lay-verify="required">
                                    <option value="" >请选择状态</option>
                                    <option value="0">隐藏</option>
                                    <option value="1" selected>正常</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="submitBtn">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
    var layer, form, bwajax, upload, $, laydate;

    layui.use(['layer', 'form', 'bwajax', 'upload', 'laydate'], function () {
        layer = layui.layer;
        form = layui.form;
        bwajax = layui.bwajax.instance();
        upload = layui.upload;
        $ = layui.jquery;
        laydate = layui.laydate;

        //文章图片上传
        var uploadInst = upload.render({
            elem: '#image'
            , url: "{:Url('/manage/publicCommon/upload')}"
            , done: function (res) {
                if (res.data.errcode === 0) {
                    var div_id = uuid();
                    //渲染图片
                    $('#imagePreview').html('                                    <div style="display: flex;flex-direction: column;width: 90px;height: 120px" id="' + div_id + '">' +
                        '                                        <img class="layui-upload-img" src="' + res.data.data.src + '" style="width: 80px;height: 80px">' +
                        '                                        <button style="width: 80px;height: 30px" type="button" class="layui-btn layui-btn-sm" onclick="delDiv(\'' + div_id + '\',\'image\')">' +
                        '                                            <i class="layui-icon">&#xe640;</i>' +
                        '                                        </button>' +
                        '                                    </div>');
                    //把图片路径渲染到input中
                    delDiv('', 'image');
                    return layer.msg('上传成功', {icon: 1});
                } else {
                    return layer.msg(res.msg, {icon: 2});
                }
            }
            , error: function () {
                return layer.msg('上传失败', {icon: 2});
            }
        });


        //TODO 监听提交按钮
        form.on('submit(submitBtn)', function (obj) {
            data = obj.field;

            if(!data.admin_id) {layer.msg('管理员id不能为空', {icon: 2});return false}
            if(!data.category_id) {layer.msg('分类id不能为空', {icon: 2});return false}
            if(!data.title) {layer.msg('文章标题不能为空', {icon: 2});return false}
            if(!data.image) {layer.msg('文章图片不能为空', {icon: 2});return false}
            if(!data.sort) {layer.msg('排序不能为空', {icon: 2});return false}
            if(!data.status) {layer.msg('状态不能为空', {icon: 2});return false}


            //TODO ajax调用后台接口
            bwajax.post("{:Url('add')}", data)
                .then(function (response) {
                    if (response.data.data.errcode === 0) {
                        layer.msg('提交成功', {icon: 1});
                        submitSuccess();
                    } else {
                        layer.msg(response.data.msg, {icon: 2});
                    }
                })

            return false;
        })
    });
</script>
{/block}